<template>
	<div class="page-wrap">
		<div class="page-content p-0">
			<div class="page-column p-0">
				<div class="page-form p-x-0">
					<el-form
						:model="ruleForm"
						:rules="rules"
						label-position="left"
						label-width="134px"
						ref="form"
						label-suffix="："
					>
						<el-row>
							<el-col :span="24">
								<el-form-item label="选择烟团" prop="YANTUANNum">
									<select-para
										size="small"
										class="smallForm"
										v-model="ruleForm.YANTUANNum"
										:label.sync="ruleForm.YANTUANNum"
										:options="YANTUANNumoptions"
									></select-para>
								</el-form-item>
								<el-form-item label="选择参数" prop="PARAMSNAME">
									<select-para
										size="small"
										class="smallForm"
										v-model="ruleForm.PARAMSNAME"
										:label.sync="ruleForm.PARAMSNAME"
										:options="PARAMSoptions"
									></select-para>
								</el-form-item>
								<el-form-item label="概率" prop="GAILV">
									<el-input
										size="small"
										class="smallForm"
										oninput="value=value.replace(/^\D*(\d*(?:\.\d{0,10})?).*$/g, '$1')"
										v-model="ruleForm.GAILV"
									></el-input>
								</el-form-item>
								<el-button type="primary" :loading="loading" @click="submitFun">确 认</el-button>
							</el-col>
						</el-row>
						<div class="separate m-b-20"></div>
						<div class="vcharts" v-show="vchartsShow">
							<div id="main" :style="{width:'80vw',height:'400px'}"></div>
						</div>
						<div class="separate m-b-20"></div>
						<el-row>
							<el-col>
								<el-table v-show="tableDataShow" border :data="tableData" style="width: 100%">
									<el-table-column align="center" prop="caselist" label="距离" width="100"></el-table-column>
									<el-table-column
										align="center"
										v-for="(item,index) in distinceList"
										:key="index"
										:prop="'distince'+index"
										:label="item.toString()"
										width="90"
									>
										<template slot-scope="scope">
										<div v-if="scope.row['distince'+index]>'1.7976931348623157e+308'">超出上限</div>
										<div v-else>{{scope.row['distince'+index]}}</div>
									</template>
									</el-table-column>
								</el-table>

								<!-- <el-table-column align="center" prop="MEAN" label="MEAN" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.MEAN>1">超出上限</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="WUSHITH" label="50TH" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.WUSHITH>1">超出上限</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="JIUSHITH" label="90TH" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.JIUSHITH>1">超出上限</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="JIUWUTH" label="95TH" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.JIUWUTH>1">超出上限</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="JIUJIUTH" label="99TH" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.JIUJIUTH>1">超出上限</div>
									</template>
								</el-table-column>
								<el-table-column align="center" prop="JIUJIUWUTH" label="99.5TH" min-width="100">
									<template slot-scope="scope">
										<div v-if="scope.row.JIUJIUWUTH>1">超出上限</div>
									</template>
								</el-table-column>-->
							</el-col>
						</el-row>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import selectPara from "@/components/selectPara"
import commCheckbox from "@/components/commCheckbox"
import ImageCropper from "@/components/ImageCropper"
import FixBottomButton from "@/components/FixBottomButton"
import ueditor from "@/components/ueditor"
import textLength from "@/components/common/comp/textLength"
import { commPara } from "@/mixins/mixins"
import { mapState } from "vuex"
import Axios from "axios"
import { dome, selecttext } from "@/utils/verify.js"
// import {
//     saveslbaseinfo,
//     slbaseinfo
// } from '../service.js';
export default {
	name: "aboutUs",
	props: {
		basicDataF: Object,
	},
	mixins: [commPara],
	components: {
		selectPara,
		ImageCropper,
		textLength,
		commCheckbox,
		FixBottomButton,
		ueditor,
	},

	data() {
		return {
			activeTab: "2",
			YANTUANNumoptions: [],
			PARAMSoptions: [],
			distinceList: [],
			ruleForm: {
				YANTUANNum: "",
				PARAMSNAME: "",
				GAILV: "",
			},
			tableData: [],
			tableDataShow: false,
			vchartsShow: false,
			rules: {
				YANTUANNum: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				PARAMSNAME: [
					{
						validator: selecttext,
						trigger: ["change", "blur"],
					},
				],
				GAILV: [
					{
						validator: dome(0, 1),
						trigger: ["change", "blur"],
					},
				],
			},

			loading: false,
		}
	},
	created() {
		this.setOption()
	},
	methods: {
		setOption() {
			let params = {
				batch_id: this.$route.query.id,
			} 
			this.$appApi
				.GET_RESULT_0_1_YANTUAN(params)
				.then((res) => {
					var str = res.data.substring(0, 1)
					if (str == "S") {
						var str = res.data.substring(8) 
						this.YANTUANNumoptions = []
						for (let index = 1; index <= parseInt(str); index++) {
							let temp = {
								label: index,
								value: index,
							}
							this.YANTUANNumoptions.push(temp)
						}
					} else if (str == "E") {
						let message = res.data.substring(6)
						this.$notify.error({
							title: "请求数据失败！",
							message: message,
							type: "success",
						})
					}
				})
				.catch((err) => {
					console.log(err)
				})

			let tempPARAMSoptions = ["空气浓度", "地面浓度", "弥散因子"]
			this.PARAMSoptions = tempPARAMSoptions.map((item) => {
				return {
					label: item,
					value: item,
				}
			})
		},
		submitFun() {
			//保存
			this.$refs.form.validate((valid) => {
				if (valid) {
					let params = {
						batch_id: this.$route.query.id,
						yantuan_number: this.ruleForm.YANTUANNum,
						param_name: this.ruleForm.PARAMSNAME,
						gailv: this.ruleForm.GAILV,
					} 
					this.$appApi
						.GET_RESULT_0_1(params)
						.then((res) => {
							var temstr = res.data.substring(0, 1)
							if (temstr == "S") {
								this.tableDataShow = true
								var str = JSON.parse(res.data.substring(8))
									.type0_1_list 
								this.distinceList = str[0].distince_list 
								this.tableData = str.map((item) => {
									let tempTab = {
										caselist: item.casename,
									}
									item.fin_result_list.forEach(
										(item2, index) => {
											tempTab["distince" + index] = item2
										}
									)
									return tempTab
								})
								this.showTU(str)
							} else if (temstr == "E") {
								let message = res.data.substring(6)
								this.$notify.error({
									title: "请求数据失败！",
									message: message,
									type: "success",
								})
							}
						})
						.catch((err) => {
							console.log(err)
						})
				}
			})
		},
		showTU(str) {
			this.vchartsShow = true
			this.$nextTick(() => {
				let myChart = this.$echarts.init(
					document.getElementById("main")
				)
				var option = {
					title: {
						text: "",
					},
					tooltip: {
						trigger: "axis",
					},
					legend: {
						data: [],
					},
					grid: {
						left: "3%",
						right: "4%",
						bottom: "3%",
						containLabel: true,
					},
					toolbox: {
						feature: {
							saveAsImage: {},
						},
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						data: [],
					},
					yAxis: {
						type: "value",
						name: "sv",
					},
					series: [],
				}
				myChart.setOption(option)
				myChart.showLoading() 
				str.forEach((caseitem) => {
					//caseitem 每个案例
					if (option.xAxis.data == 0) {
						option.xAxis.data = caseitem.distince_list
					}
					let a = caseitem.caseid + "_" + caseitem.casename
					let obj = option.legend.data.indexOf(a)
					if (obj == "-1") {
						option.legend.data.push(a)
						option.series.push({
							name: a,
							type: "line",
							stack: "总量",
							data: [],
						})
					} else {
					}
					option.series.forEach((charitem) => {
						if (charitem.name == a) {
							charitem.data = caseitem.fin_result_list
						}
					})
					myChart.hideLoading()
					myChart.setOption(option)
				})
			})
		},
	},
}
</script>
<style lang="scss" scoped>
.page-flex-row /deep/ .el-collapse-item__header {
	background: #f3f9fe;
}
</style>